網頁的工具箱--jQuery的小小實作

2023 iThome 鐵人賽

DAY 10

Modern Web

蛤架一個網站好貴喔，那我自己來系列第 10 篇

15th鐵人賽

anngood

團隊好想放假大學

2023-09-25 20:54:57

140 瀏覽

分享至

大家好~ 今天我們要來做簡單的jQuery實作~
昨天介紹了很多關於jQuery的操作，今天我們來實作一次吧!
html

<!DOCTYPE html>
<html>
<head>
    <title>我的第一個網頁</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="ann.css">
</head>
<body>
    <h1>Hello World</h1>
    <button id="click_me">按我</button>
    <div id="message">這區域會變色喔</div>
    <script src="ann.js"></script>
    <img class="bear" src="第五天熊.png" alt="little_bear">
    <div id="catch">你能抓到我嗎</div>
    <div id="catch2">我在這</div>
</body>
</html>

css

body {
    font-size:20px;
    background-color: #f0f0f0;
}
h1 {
    color:red;
}
#message {
    color:black;
    height: 50px;
}
.click_me{
     width: 100px;
}
.bear{
    width:200px;
    height:200px;
    border-radius: 100px;
    animation-name: Movebear;   
    animation-duration: 5s;    
    animation-delay: 0s; 
    animation-iteration-count: infinite; 
}
.highlight {
    background-color: yellow;
    /* width:100px;
    height:100px; */
}
#catch{
    width:200px;
    height:200px;
    color: black;
}
#catch2{
    width:200px;
    height:200px;
    color: white;
}
@keyframes Movebear{
    0%{
        transform:rotate(0deg);
      	/*transfom讓元素可以被平移、旋轉、縮放和傾斜*/
    }
    100%{
        transform:rotate(360deg);
    }
}

javascript

$(document).ready(function(){
    var count = 0;
    $("#click_me").click(function(){
        $("#message").toggleClass("highlight");
        if(count%7==0){
            $("#message").text("紅色");
            $("#message").css("background-color", "red");
        }
        else if(count%7==1){
            $("#message").text("橙色");
            $("#message").css("background-color", "orange");
        }
        else if(count%7==2){
            $("#message").text("黃色");
            $("#message").css("background-color", "yellow");
        }
        else if(count%7==3){
            $("#message").text("綠色");
            $("#message").css("background-color", "green");
        }
        else if(count%7==4){
            $("#message").text("藍色");
            $("#message").css("background-color", "blue");
        }
        else if(count%7==5){
            $("#message").text("靛色");
            $("#message").css("background-color", "#4B0082");
        }
        else if(count%7==6){
            $("#message").text("紫色");
            $("#message").css("background-color", "purple");
        }
        count++;
    });
    $("#catch").on("mouseenter", function(){
        $(this).css("color", "white");
        $("#catch2").css("color", "black");
    });

    $("#catch").on("mouseleave", function(){
        $(this).css("color", "black");
        $("#catch2").css("color", "white");
    });

    
});

我們運用了click以及mouseenter的監聽器，去實現了按鈕換色及貓抓老鼠的功能。
以下為成品展示。
按鈕換色

貓抓老鼠